<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>轮播图</title>
	<link rel="stylesheet" type="text/css" href="http://www.stacysi.top:8888/myboke/css/style.css">
</head>
<body>

	<div class="content">
		<div class="a-content">
			<div class="carousel-content">
				<ul class="carousel">
					<li><img src="http://www.stacysi.top:8888/myboke/images/lunbo/pic1.png"></li>
					<li><img src="http://www.stacysi.top:8888/myboke/images/lunbo/pic2.png"></li>
					<li><img src="http://www.stacysi.top:8888/myboke/images/lunbo/pic3.png"></li>
					<li><img src="http://www.stacysi.top:8888/myboke/images/lunbo/pic4.png"></li>
					<li><img src="http://www.stacysi.top:8888/myboke/images/lunbo/pic5.png"></li>
				</ul>
				<ul class="img-index"></ul>
				<div class="carousel-prev"><img src="http://www.stacysi.top:8888/myboke/images/lunbo/left1.png"></div>
				<div class="carousel-next"><img src="http://www.stacysi.top:8888/myboke/images/lunbo/right1.png"></div>
			</div>
		</div>
	</div>
	<iframe id="iframe" frameborder="no" scrolling="no" width="200px" height="300px" src="loading.html">
		</iframe>
	
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="http://www.stacysi.top:8888/myboke/js/carousel.js"></script>
	<script type="text/javascript">
		var root = "http://www.stacysi.top:8888/myboke/";
		$(function(){
			$(".carousel-content").carousel({
				carousel : ".carousel",//轮播图容器
				indexContainer : ".img-index",//下标容器
				prev : ".carousel-prev",//左按钮
				next : ".carousel-next",//右按钮
				timing : 3000,//自动播放间隔
				animateTime : 700,//动画时间
				autoPlay : true,//是否自动播放 true/false
				direction : "left",//滚动方向 right/left
			});

			$(".carousel-content").hover(function(){
				$(".carousel-prev,.carousel-next").fadeIn(300);
			},function(){
				$(".carousel-prev,.carousel-next").fadeOut(300);
			});

			$(".carousel-prev").hover(function(){
				$(this).find("img").attr("src",root+"images/lunbo/left2.png");
			},function(){
				$(this).find("img").attr("src",root+"images/lunbo/left1.png");
			});
			$(".carousel-next").hover(function(){
				$(this).find("img").attr("src",root+"/images/lunbo/right2.png");
			},function(){
				$(this).find("img").attr("src",root+"/images/lunbo/right1.png");
			});
		});

	</script>
</body>
</html>